<template>
  <view class="container">
    <view class="example">
      <van-form ref="form" @submit="onSubmit">
        <van-field
          v-model="user.nickName"
          name="nickName"
          label="用户昵称"
          placeholder="请输入昵称"
          :rules="[{ required: true, message: '用户昵称不能为空' }]"
        />
        <van-field
          v-model="user.phonenumber"
          name="phonenumber"
          label="手机号码"
          placeholder="请输入手机号码"
          :rules="[
            { required: true, message: '手机号码不能为空' },
            { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码' }
          ]"
        />
        <van-field
          v-model="user.email"
          name="email"
          label="邮箱"
          placeholder="请输入邮箱"
          :rules="[
            { required: true, message: '邮箱地址不能为空' },
            { type: 'email', message: '请输入正确的邮箱地址' }
          ]"
        />
        <van-field
          name="sex"
          label="性别"
          :rules="[{ required: true, message: '请选择性别' }]"
        >
          <template #input>
            <van-radio-group v-model="user.sex" direction="horizontal">
              <van-radio v-for="item in sexs" :key="item.value" :name="item.value">{{ item.text }}</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </view>
  </view>
</template>

<script>
import { getUserProfile, updateUserProfile } from "@/api/system/user";
import { Toast } from 'vant';

export default {
  data() {
    return {
      user: {
        nickName: "",
        phonenumber: "",
        email: "",
        sex: ""
      },
      sexs: [
        { text: '男', value: "0" },
        { text: '女', value: "1" }
      ]
    };
  },
  onLoad() {
    this.getUser();
  },
  methods: {
    getUser() {
      getUserProfile().then(response => {
        this.user = response.data;
      });
    },
    onSubmit(values) {
      this.$refs.form.validate().then(() => {
        updateUserProfile(this.user).then(response => {
		  uni.showToast({
		    title: "修改成功",
		    icon: 'success'
		  })	
          uni.switchTab({
             url: `../index`,
          });
		  
        })
      }).catch(error => {
        console.log("表单验证失败", error);
      });
    }
  }
};
</script>

<style scoped>
.example {
  padding: 20px;
}
</style>


<style lang="scss">
  page {
    background-color: #ffffff;
  }

  .example {
    padding: 15px;
    background-color: #fff;
  }

  .segmented-control {
    margin-bottom: 15px;
  }

  .button-group {
    margin-top: 15px;
    display: flex;
    justify-content: space-around;
  }

  .form-item {
    display: flex;
    align-items: center;
    flex: 1;
  }

  .button {
    display: flex;
    align-items: center;
    height: 35px;
    line-height: 35px;
    margin-left: 10px;
  }
</style>
